<template>
  <div>
    <h1>当前求和为：{{ reuslt }}</h1>
    <h1>当前求和放大10倍：{{bigResult}}</h1>
    <h1>我叫{{user}},喜欢{{eat}}</h1>
    <el-select size="mini" v-model.number="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button @click="add(value)">+</el-button>
    <el-button @click="del(value)">-</el-button>
    <el-button @click="addOdd(value)">当前求和为奇数再加</el-button>
    <el-button @click="addDelay(value)">等一等再加</el-button>
  </div>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    computed:{
       
        // 接收mapState生成计算属性，从state中读取数据（对象写法）
        // ...mapState({reuslt:"reuslt",user:'user',eat:'eat'}),
        // 接收mapState生成计算属性，从state中读取数据（数组写法）
        ...mapState(['reuslt','user','eat']),


        // 接收mapGetters生成计算属性，从getters中读取数据（对象写法）
        // ...mapGetters({bigResult:'bigResult'})
        // 接收mapGetters生成计算属性，从getters中读取数据（数组写法）
        ...mapGetters(['bigResult'])

    },
  data() {
    return {
      options: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
      ],
      value: "",
    };
  },
  methods: {
    // 亲自手写
   /*  add() {
      this.$store.commit('ADD',Number(this.value))
    },
    del() {
     this.$store.commit('DEL',Number(this.value))
    },
    addOdd() {
      this.$store.dispatch('addOdd',Number(this.value))
    },
    addDelay() {
      this.$store.dispatch('addDelay',Number(this.value))
    }, */


    // 借助mapMutations生成对应的方法，方法中会去调commit从而去联系mutation（对象写法）
    ...mapMutations({add:'ADD',del:'DEL'}),
    // 借助mapMutations生成对应的方法，方法中会去调commit从而去联系mutation（数组写法）
    // ...mapMutations(['ADD','DEL'])

    // 借助mapActions生成对应的方法，方法中会去调dispatch从而去联系actions（对象写法）
    ...mapActions({addOdd:'addOdd',addDelay:'addDelay'}),
    // 借助mapActions生成对应的方法，方法中会去调dispatch从而去联系actions（数组写法）
    // ...mapActions(['addOdd','addDelay'])

  },
};
</script>
<style scoped>
.el-select-dropdown__item.hover /deep/,  .el-select-dropdown__item:hover /deep/{
    background-color: 	#FFFACD;
    color: #e6694a;
}
</style>